<template>
<div class="person">
    <h1>typescript</h1>
    <div>
        msg1: {{msg1}}<br/>
        msg2: {{msg2}}<br/>
        <ul>
            <li v-for="item in perList" :key="item.id">
                {{ item.name }} - {{ item.age }}
            </li>
        </ul>
    </div>
</div>
</template>

<script setup lang="ts">

import {type Person, type Persons } from '@/types';
import {ref, reactive, defineProps} from 'vue';

defineOptions({
    name: 'Person123', // 组件名
});

let person = reactive<Person>({
    name: "张三",
    age: 18
});

let persons = ref<Persons>([
    {name: "李四", age: 20},
    {name: "王五", age: 22}
]);

// 定义带默认值的 props
const params = withDefaults(defineProps<{
    msg1?: string,
    msg2?: string,
    perList?: Persons
}>(), {
    msg2: "hello",
    // 这里的 perList 默认值必须是一个函数，不能直接是一个数组
    perList: ()=>[
        {
            id: "33",
            name: "default",
            age: 10
        }
    ]
})
console.log(params['msg1'])
console.log(params['msg2'])

</script>
<style lang="scss" scoped>
.person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
button{
    margin: 0 5px;
}
</style>
